<template>
	<view class="step-item">
		<view class="form-container">
			<view class="activity-info">
				<view class="top-container" style="display: flex; align-items: center">
<view class="">
	<view class="activity-title">
		<text>活动名称：</text>
		<text>{{ activityName }}</text>
	</view>
	
	<view class="success-notice">
		<u-icon name="clock" style="margin-left: -18rpx"></u-icon>
		<text>活动已成功上线，开始接受报名！</text>
	</view>
</view>
					<image src="/static/images/completed.png" mode="" style="right: 0%; width: 220rpx; height: 220rpx"></image>
				</view>
				<view class="details">
					<view class="detail-item">
						<view style="display: flex; align-items: center">
							<image src="/static/images/play.png" mode="" style="width: 20.44rpx; height: 24rpx; margin-left: -23rpx"></image>
							<text style="margin-left: 7rpx">活动类型：</text>
						</view>
						<text>普通活动（上架费5元）</text>
					</view>

					<view class="detail-item">
						<text>活动开始时间：</text>
						<text>{{ startTime }}</text>
					</view>

					<view class="detail-item">
						<text>活动截止时间：</text>
						<text>{{ endTime }}</text>
					</view>

					<view class="detail-item">
						<text>活动时长：</text>
						<text>{{ duration }}</text>
					</view>

					<view class="detail-item">
						<text>适用年龄：</text>
						<text>{{ ageRange }}</text>
					</view>

					<view class="detail-item">
						<text>报名人数：</text>
						<text>{{ participantRange }}</text>
					</view>

					<view class="detail-item">
						<text>活动地点：</text>
						<text>{{ location }}</text>
					</view>
				</view>

				<view class="price-info">
					<view class="price-item">
						<image src="/static/images/thali.png" mode="" style="width: 20.44rpx; height: 24rpx; margin-left: -19rpx"></image>
						<text>单人套餐：原价 ¥{{ originalPrice }}，优惠价 ¥{{ discountPrice }} ({{ discount }}折)</text>
					</view>
					<view class="price-item">
						<text>一大一小套餐：原价 ¥{{ originalPrice }}，优惠价 ¥{{ discountPrice }} ({{ discount }}折)</text>
					</view>
				</view>

				<view class="share-info" style="height: 140rpx; background: #fbfbfb; border-radius: 10rpx">
					<view style="display: flex; align-items: center">
						<image src="/static/images/scale.png" mode="" style="width: 20.44rpx; height: 24rpx; margin-left: -19rpx"></image>
						<view class="share-item">
							<text>分享人比例：{{ shareRatio }}</text>
						</view>
					</view>
					<view class="share-item">
						<text>陪伴师固定金额：¥{{ companionFee }}</text>
					</view>
				</view>

				<view class="coupon-info" style="height: 90rpx; background: #fbfbfb; border-radius: 10rpx;  display: flex;
  align-items: center;">
					<image src="/static/images/discount.png" mode="" style="width: 20.44rpx; height: 24rpx; margin-left: -19rpx"></image>
					<text style="margin-left: 7rpx">启用优惠券：¥{{ couponAmount }}</text>
				</view>
			</view>
		</view>

		<view class="bottom-buttons">
			<view class="prev-btn" @click="prev">
				<text>上一步</text>
			</view>
			<view class="finish-btn" @click="finish" v-if="showFinishButton">
				<text>完成</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		activityState: Number  
	},

	computed: {
		showFinishButton() {
			return this.activityState === 2; // 只有审核通过显示完成按钮
		}
	}
};
</script>

<style lang="scss" scoped>
.step-item {
	background-color: #ffffff;
	min-height: 100vh;
	padding: 20rpx;
}

.activity-info {
	padding: 30rpx;
	background: #fff;
	border-radius: 12rpx;
}

.activity-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.success-notice {
	color: #00cc66;
	font-size: 28rpx;
	margin-bottom: 30rpx;

	.icon {
		margin-right: 10rpx;
	}
}

.details {
	.detail-item {
		font-size: 28rpx;
		margin-bottom: 16rpx;
		color: #333;
	}
}

.price-info {
	margin: 30rpx 0;

	.price-item {
		font-size: 28rpx;
		margin-bottom: 16rpx;

		.check-icon {
			color: #00cc66;
			margin-right: 10rpx;
		}
	}
}

.share-info,
.coupon-info {
	font-size: 28rpx;
	margin-bottom: 16rpx;

	.share-icon,
	.coupon-icon {
		margin-right: 10rpx;
	}
}

.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 24rpx;
	padding: 40rpx 20rpx;
	background: #fff;

	.prev-btn,
	.finish-btn {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 44rpx;
		font-size: 32rpx;
	}

	.prev-btn {
		border: 2rpx solid #00cc66;
		color: #00cc66;
	}

	.finish-btn {
		background: #00cc66;
		color: #fff;
	}
	.top-container {
		display: flex;
		align-items: center;
		justify-content: space-between; /* 让内容和图片分别在两端 */
	}
}
</style>